<template>
  <div>
    <div style="background-color: ghostwhite;padding: 10px 15px;">
      <draggable
        v-model="columns"
        v-bind="{
          group: 'widgetConfig',
          ghostClass: 'ghost',
          animation: 200,
        }"
        class="widget-form-list"
        handle=".config-move"
      >
        <div
          class="config-options margin-bottom-sm "
          v-for="(opt, o) in columns"
          :key="o"
        >
          <i
            class="designer-icon config-move"
            style="font-size: 18px;cursor:move;"
            >&#xe627;</i
          >
          <span class="margin-left-lg" style="font-size:18px;">{{
            opt.title
          }}</span>
          <i
            class="designer-icon margin-left-lg"
            @click="editOpt(opt, o)"
            style="cursor:pointer;font-size: 18px;color: #f5222d"
            >&#xe60e;</i
          >
          <i
            class="designer-icon margin-left-lg"
            @click="delOpt(opt, o)"
            style="cursor:pointer;font-size: 18px;color: #f5222d"
            >&#xe665;</i
          >
        </div>
      </draggable>

      <div class="margin-left-sm margin-tb-lg">
        <a @click="addColumn()" class="designer-icon">&#xe655;添加列</a>
      </div>
    </div>
    <column-add ref="columnAdd" @success="success" />
  </div>
</template>
<script>
import columnAdd from './columnAdd.vue'

export default {
  components: { columnAdd },

  data() {
    return {
      columns: []
    }
  },
  created() {},
  mounted() {},
  watch: {
    columns: {
      handler() {
        this.change()
      },
      deep: true
    }
  },
  methods: {
    init(columns) {
      this.columns = columns
    },
    addColumn() {
      this.$refs.columnAdd.showModal()
    },
    editOpt(item, idx) {
      this.$refs.columnAdd.showModal(item, idx)
    },
    delOpt(item, idx) {
      this.columns.splice(idx, 1)
      // this.change()
    },
    success(item, idx) {
      if (idx > -1) {
        this.columns[idx] = item
        this.columns = JSON.parse(JSON.stringify(this.columns))
      } else {
        this.columns.push(item)
      }
      // this.change()
    },
    change() {
      this.$emit('change', this.columns)
    }
  }
}
</script>
<style></style>
